<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS盒模型 </title>
    <style type="text/css">
        h2 {
            color: black;
            background: green;
        }

        div {
            text-align: center;
        }

        a {
            display: inline-block; /* inline-block就是将元素设置为内联块状元素。(css2.1新增)，img、input标签就是这种内联块状标签。*/
            width: 50px; /*在默认情况下宽度不起作用*/
            height: 50px; /*在默认情况下高度不起作用*/
            background: pink; /*设置背景颜色为粉色*/
            line-height: 50px;
        }
    </style>
</head>
<body>

<!--============================分割线===============================-->
<h2>元素分类</h2>

<div> 常用的块状元素有：div、p、h1...h6、ol、ul、dl、table、address、blockquote 、form</div>

<div> 常用的内联元素有： a、span>、br>、i>、em>、strong>、label>、q>、var>、cite>、code></div>

<div> 常用的内联块状元素有：img>、input></div>


<!--============================分割线===============================-->
<h2>元素分类 :块状元素 块级元素都从新的一行开始，并且其后的元素也另起一行。 元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%</h2>

内联元素a转换为块状元素，从而使a元素具有块状元素特点。 如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

<div><a style="display: block">dddddddd</a> <a>xxxxxxxxxxxxxxx</a></div>


<!--============================分割线===============================-->
<h2>内联块状元素 ,1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置。</h2>
<!--原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。-->
<div>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
</div>


<!--============================内联元素===============================-->
<h2>内联元素 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。</h2>

<div style="display: inline">我要变成内联元素</div>
<div style="text-align: left">我要变成内联元素</div>

<!--============================分割线===============================-->
<h2>盒模型--边框 </h2>
<!--dashed（虚线）| dotted（点线）| solid（实线）。-->
<div style="border:  1px dashed #ff293f"> 这是盒模型</div>


<pre>
--div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。
</pre>


<pre>

    div{padding:20px 10px 15px 30px;}
    相当于
    div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
        }

</pre>



<pre>

div{margin:20px 10px 15px 30px;}
    相当于
 div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

</pre>
</body>
</html>